
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Button, Drawer, Modal } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

import APP_LOGO from '../../../assets/react.svg';

import { Application, installApplication, qiniuGetUrl } from '../../../services';
import { openApplication } from '../../../components';
import { ApplicationDetail } from './application-detail';

export interface ApplicationGridItemProps {
    style?: CSSProperties;
    item: Application;
    onDoubleClick?: (item: Application) => Promise<void>;
    onClick?: (item: Application) => Promise<void>;
    onInstall?: (item: Application) => Promise<void>;
    onDetail?: (item: Application) => Promise<void>;
}

const ApplicationGridItem: React.FC<ApplicationGridItemProps> = (props: any) => {

    const [url, setUrl] = useState<string | null>(null);

    useEffect(() => {
        //
        qiniuGetUrl([props.item.icon]).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setUrl(url[0]);
            }
        });
    }, [props.item.icon]);

    return (
        <ItemContainer
            style={props.style}
            onDoubleClick={async () => {
                props.onDoubleClick && await props.onDoubleClick(props.item)
            }}
            onClick={async () => {
                props.onClick && await props.onClick(props.item)
            }}
        >
            {
                !url && <IconContainer><LoadingOutlined /></IconContainer>
            }
            {
                url && <Icon src={url} />
            }

            <ItemCenter>
                <Title>{props.item.name}</Title>
                <Description>{props.item.description}</Description>
            </ItemCenter>
            <Buttons>
                <Button style={{ width: '60px', height: '24px' }} type={'primary'} size={'small'} onClick={async () => {
                    props.onInstall && props.onInstall(props.item);
                }}>安装</Button>
                <Button style={{ width: '60px', height: '24px' }} size={'small'} onClick={async () => {
                    props.onDetail && props.onDetail(props.item);
                }}>详情</Button>
            </Buttons>
        </ItemContainer>
    );
}


export interface ApplicationGridProps {

    style?: CSSProperties;

    layout?: 'horizontal' | 'vertical';

    items: Array<Application>;

    onInstalled?: (item: Application) => Promise<void>;
}

export const ApplicationGrid: React.FC<ApplicationGridProps> = (props: any) => {

    const [detailOpen, setDetailOpen] = useState<boolean>(false);

    const [installOpen, setInstallOpen] = useState<boolean>(false);

    const [selected, setSelected] = useState<Application | null>(null);

    const [installMessages, setInstallMessages] = useState<Array<string>>([]);

    if (!props.items || props.items.length <= 0) {
        return (
            <EmptyContainer style={props.style}>
                没有找到相关数据~
            </EmptyContainer>
        );
    }
    return (
        <Container style={{
            ...props.style,
            ...(props.layout === 'vertical' ? {
                flexDirection: 'column'
            } : {
                flexDirection: 'row'
            })
        }}>
            {
                props.items && props.items.map((item, index) => {
                    return (
                        <ApplicationGridItem
                            key={index}
                            item={item}
                            style={{
                                width: '260px',
                                height: '90px'
                            }}
                            onDetail={async (item) => {
                                setSelected(item);
                                setDetailOpen(true);
                            }}
                            onInstall={async (item) => {
                                setInstallOpen(true);
                                setInstallMessages([]);
                                let res = await installApplication(item, async (process) => {
                                    console.log(process);
                                    setInstallMessages(installMessages.concat(process.message));
                                });
                                setInstallOpen(false);
                                //跳转到
                                props.onInstalled && await props.onInstalled(item);
                            }}
                            onDoubleClick={async (item) => {
                            }}
                        ></ApplicationGridItem>
                    );
                })
            }
            <Drawer
                title="应用详情"
                onClose={() => {
                    setDetailOpen(false);
                }}
                width={'calc(100% - 220px)'}
                destroyOnClose={true}
                open={detailOpen}>
                <ApplicationDetail item={selected}></ApplicationDetail>
            </Drawer>
            <Modal title="应用安装"
                closable={false}
                footer={false}
                open={installOpen}
                onOk={() => { }}
                onCancel={() => { }}>
                {
                    installMessages && installMessages.map((message, index) => {
                        return (
                            <p>{message}</p>
                        );
                    })
                }
            </Modal>
        </Container>
    );
}

const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Container = styled.div`
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
`;

const ItemContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #FFFFFF;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 10px;
`;

const IconContainer = styled.div`
    border-radius: 6px;
    width: 60px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #ff7875;
`;

const Icon = styled.img`
    border-radius: 6px;
    width: 60px;
    height:60px;
`;

const ItemCenter = styled.div`
    flex:1;
    padding: 0 6px;
`;

const Title = styled.div`
    font-size: 16px;
    font-weight: bolder;
    line-height: 26px;
`;

const Description = styled.div`
    font-size: 10px;
    color: #999999;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical; 
`;

const Buttons = styled.div`
    width: 65px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
`;